<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <script src="axios.js"></script>
        <script>
            const request = axios.create({
                baseURL: 'http://localhost:8080', //主机地址
                timeout: 1000, //超时时间
                headers: {
                    token: 'leafinsert'
                }
            })
            // 请求拦截器(下面的第一个request只是变量名，第二个才代表请求)
            request.interceptors.request.use(function(config){
                console.log('请求拦截')
                console.log('config',config)
                config.headers.mytoken = 'leaf'  
                return config
            },function(error){
                return Promise.reject(error)
            })
            // 添加响应拦截器
             request.interceptors.response.use(function(response){
                console.log('response',response)
                return response.data
             },function(error){
                //  对错误进行处理
                return Promise.reject(error)
             }) 
            request({
                url: '/user/list',
                method: 'get'
            }).then(response=>{
                console.log('数据获取成功了',response)
            }).catch(error=>{
                console.log('数据获取失败',error)
            })
            // 上一种写法是把axios当作方法调用，下一种是当成对象调用
            request
            .get('/user/list')
            .then(response=>{
                console.log('数据获取成功啊',response.data)
            })
            .catch(error=>{
                console.log('数据获取失败',error)
            })

        </script>
    </body>
</html>